<template>
  <div>
    <div>
      <Tabs destroy-inactive-tab-pane type="card">
        <Tabs.TabPane v-if="props.processHisShow" key="processHis" tab="审批历史">
          <Card size="small">
            <template #title>
              流程记录 <span style="color: red;">{{ candidateUserNames }} </span>
            </template>
            <DynamicTable row-key="id" :show-tool-bar="false" :search="false" header-title=""
              :data-request="openHandleModel" :columns="processHisColumns" bordered size="small">
            </DynamicTable>
          </Card>
          <Card title="流程图" size="small" style="margin-top: 10px ;">
            <div v-html="svgData">
            </div>
          </Card>
        </Tabs.TabPane>
        <Tabs.TabPane v-if="props.orderInfoShow" key="orderInfo" tab="工单信息">
          <Empty v-show="workOrder.info == null"></Empty>
          <a-row :gutter="[16, 16]">
            <a-col span="24">
              <Card class="mt-3">
                <Descriptions :column="4" :label-style="{ width: '120px' }" size="small" bordered>
                  <Descriptions.Item label="工单编号" :span="1">
                    {{ workOrder.info.workOrderNumber }}
                  </Descriptions.Item>
                  <Descriptions.Item label="受理工号" :span="1">
                    {{ workOrder.info.acceptNumber }}
                  </Descriptions.Item>
                  <Descriptions.Item label="受理时间" :span="1">
                    {{ workOrder.info.acceptTime }}
                  </Descriptions.Item>
                  <Descriptions.Item label="来电号码" :span="1">
                    {{ workOrder.info.callerNumber }}
                  </Descriptions.Item>
                  <Descriptions.Item label="工单类型" :span="1">
                    {{ selectDictLabel(props.dataObject.workOrderTypeDict, workOrder.info.workOrderType) }}
                  </Descriptions.Item>
                  <Descriptions.Item label="信息来源" :span="1">
                    {{ selectDictLabel(props.dataObject.infoSerrcesTypeDict, workOrder.info.infoSerrces) }}
                  </Descriptions.Item>
                  <Descriptions.Item label="所在区域" :span="1">
                    {{ selectDictLabel(props.dataObject.regionDict, workOrder.info.region) }}
                  </Descriptions.Item>
                  <Descriptions.Item label="行业类型" :span="1">
                    {{ selectDictLabel(props.dataObject.industryTypeDict, workOrder.info.industryType) }}
                  </Descriptions.Item>
                  <Descriptions.Item label="责任单位" :span="1">
                    {{ selectDictLabel(props.dataObject.responsibleUnitDict, workOrder.info.responsibleUnit) }}
                  </Descriptions.Item>
                  <Descriptions.Item label="所在片区" :span="1">
                    {{ selectDictLabel(props.dataObject.areaDict, workOrder.info.area) }}
                  </Descriptions.Item>
                  <Descriptions.Item label="联系人" :span="1">
                    {{ workOrder.info.contacts }}
                  </Descriptions.Item>
                  <Descriptions.Item label="联系方式" :span="1">
                    {{ workOrder.info.contactsInfo }}
                  </Descriptions.Item>
                  <Descriptions.Item label="派单时间" :span="1">
                    {{ workOrder.info.dispatchTime }}
                  </Descriptions.Item>
                  <Descriptions.Item label="到期时间" :span="1">
                    {{ workOrder.info.expirationTime }}
                  </Descriptions.Item>
                    <Descriptions.Item v-if="showCompleteTime" label="结案时间" :span="2">
                    {{ workOrder.info.completionTime }}
                  </Descriptions.Item>
                  <Descriptions.Item v-if="!showCompleteTime"  label="回复剩余时间" :span="2">
                    <CountDown title="" :countdown=downCount format=' D 天 H 时 m 分 s 秒' :autoStart=true></CountDown>
                  </Descriptions.Item>
                  <Descriptions.Item label="处理期限" :span="1">
                    {{ workOrder.info.processingPeriod + '小时' }}
                  </Descriptions.Item>
                  <Descriptions.Item label="紧急程度" :span="1">
                    {{ workOrder.info.urgency == '0' ? '一般' : '紧急' }}
                  </Descriptions.Item>
                  <Descriptions.Item label="是否回访" :span="2">
                    {{ workOrder.info.returnVisit == '1' ? '是' : '否' }}
                  </Descriptions.Item>
                  <Descriptions.Item label="发生地址" :span="4">
                    {{ workOrder.info.occAddress }}
                  </Descriptions.Item>
                  <Descriptions.Item label="问题描述" :span="4">
                    {{ workOrder.info.problemDesc }}
                  </Descriptions.Item>
                  <Descriptions.Item label="备注" :span="4">
                    {{ workOrder.info.remarks }}
                  </Descriptions.Item>
                  <Descriptions.Item label="附件" :span="3">
                    <div :style="{ height: '80px', overflowY: 'auto', }">
                      <div v-if="workOrder.info.woAttachmentList != undefined && workOrder.info.woAttachmentList.length > 0">
                        <List size="small" item-layout="horizontal" :data-source="workOrder.info.woAttachmentList">
                          <template #renderItem="{ item }">
                            <List.Item>
                              <a @click="downloadAttament(item.id)"><file-two-tone />{{ item.fileName }} </a>
                            </List.Item>
                          </template>
                        </List>
                      </div>
                      <div v-else><Empty :imageStyle="{height:'50px'}"></Empty></div>
                    </div>
                  </Descriptions.Item>
                </Descriptions>
              </Card>
            </a-col>
          </a-row>
        </Tabs.TabPane>

        <Tabs.TabPane v-if="props.replyShow" key="reply" tab="回复">
          <Radio.Group v-show="childnumber.length != 0" :disabled="false" :onChange="replyChangeNoReply"
            v-model="props.workOrderNumber" :options="childnumber" option-type="button"></Radio.Group>
          <Empty v-show="replyData.replyDataSource.length == 0"></Empty>
          <a-row :gutter="[16, 16]">
            <template v-for="(item, key) in replyData.replyDataSource" :key="key">
              <a-col span="24">
                <Card class="mt-3">
                  <Descriptions :column="2" :label-style="{ width: '90px' }" size="small" bordered>
                    <Descriptions.Item label="回复单号">
                      {{ item.replyNo }}
                    </Descriptions.Item>
                    <Descriptions.Item label="反馈方式">
                      {{ item.replyType == 0 ? '回复回单' : '回复退单' }}
                    </Descriptions.Item>
                    <Descriptions.Item label="回复内容" :span="2">
                      <div :style="{ height: '80px', overflowY: 'auto', }">
                        经{{ item.replyer }}核查，{{ item.replyContent }}
                      </div>
                    </Descriptions.Item>
                    <Descriptions.Item label="回复人">
                      {{ item.replyer }}
                    </Descriptions.Item>
                    <Descriptions.Item label="回复时间">
                      {{ item.replyTime }}
                    </Descriptions.Item>
                    <Descriptions.Item label="经办人">
                      {{ item.handledBy }}
                    </Descriptions.Item>
                    <Descriptions.Item label="联系电话">
                      {{ item.contactNumber }}
                    </Descriptions.Item>
                    <Descriptions.Item label="附件" :span="2">
                      <div :style="{ height: '80px', overflowY: 'auto', }">
                        <div v-if="item.woAttachmentList.length > 0">
                          <List size="small" item-layout="horizontal" :data-source="item.woAttachmentList">
                            <template #renderItem="{ item }">
                              <List.Item>
                                <a @click="downloadAttament(item.id)"><file-two-tone />{{ item.fileName }} </a>
                              </List.Item>
                            </template>
                          </List>
                        </div>
                      </div>
                    </Descriptions.Item>
                  </Descriptions>
                </Card>
              </a-col>
            </template>
          </a-row>
        </Tabs.TabPane>
        <Tabs.TabPane v-if="props.returnVisitShow" key="returnVisit" tab="回访">
          <Radio.Group :disabled="false" v-show="childnumber.length != 0" :onChange="replyChangeNorReturnVisit"
            v-model="props.workOrderNumber" :options="childnumber" option-type="button"></Radio.Group>
          <Empty v-show="visitData.visitDataSource.length == 0"></Empty>
          <a-row :gutter="[16, 16]">
            <template v-for="(item, key) in visitData.visitDataSource" :key="key">
              <a-col span="24">
                <Card class="mt-3">
                  <Descriptions :column="2" :label-style="{ width: '90px' }" size="small" bordered>
                    <Descriptions.Item label="回访单号">
                      {{ item.returnVisitNo }}
                    </Descriptions.Item>
                    <Descriptions.Item label="回访时间">
                      {{ parseTime(item.returnTime) }}
                    </Descriptions.Item>
                    <Descriptions.Item label="回访人">
                      {{ item.returnVisitors }}
                    </Descriptions.Item>
                    <Descriptions.Item label="回访电话">
                      {{ item.returnCall }}
                    </Descriptions.Item>
                    <Descriptions.Item label="回访对象">
                      {{ item.returnObject }}
                    </Descriptions.Item>
                    <Descriptions.Item label="市民电话">
                      {{ item.citizenCall }}
                    </Descriptions.Item>
                    <Descriptions.Item label="回访方式" :span="2">
                      {{ item.returnMethod }}
                    </Descriptions.Item>
                    <Descriptions.Item label="服务过程">
                      {{ item.processOpinion == '0' ? '满意' : item.processOpinion == '1' ? '基本满意' : item.processOpinion ==
                        '2' ? '不满意' : '当事人联系不上' }}
                    </Descriptions.Item>
                    <Descriptions.Item label="办理过程">
                      {{ item.resultOpinion == '0' ? '满意' : item.resultOpinion == '1' ? '基本满意' : item.resultOpinion ==
                        '2' ? '不满意' : '当事人联系不上' }}
                    </Descriptions.Item>
                    <Descriptions.Item label="过程描述" :span="2">
                      <div :style="{ height: '80px', overflowY: 'auto', }">
                        {{ item.describe }}
                      </div>
                    </Descriptions.Item>
                    <Descriptions.Item label="登记人">
                      {{ item.filledBy }}
                    </Descriptions.Item>
                    <Descriptions.Item label="登记时间">
                      {{ parseTime(item.filledTime) }}
                    </Descriptions.Item>
                  </Descriptions>
                </Card>
              </a-col>
            </template>
          </a-row>
        </Tabs.TabPane>
        <Tabs.TabPane v-if="props.extensionShow" key="extension" tab="延期申请">
          <Empty v-show="extensionData.length == 0"></Empty>
          <a-row :gutter="[16, 16]">
            <template v-for="(item, key) in extensionData" :key="key">
              <a-col span="24">
                <Card class="mt-3">
                  <Descriptions :column="3" :label-style="{ width: '120px' }" size="small" bordered>
                    <Descriptions.Item label="申请单号" :span="1.5">
                      {{ item.extensionNo }}
                    </Descriptions.Item>
                    <Descriptions.Item label="预计完成时间" :span="1.5">
                      {{ item.estimatedCompletionTime }}
                    </Descriptions.Item>
                    <Descriptions.Item label="延期原因" :span="3">
                      <div :style="{ height: '80px', overflowY: 'auto', }">
                        {{ item.extensionReason }}
                      </div>
                    </Descriptions.Item>
                    <Descriptions.Item label="审批状态">
                      {{ item.approveStatus == '0' ? '未提交审核' : item.approveStatus == '1' ? '审批中' : '审批完成' }}
                    </Descriptions.Item>
                    <Descriptions.Item label="是否同意延期">
                      {{ item.approveStatus != '2' ? '--' : item.replyStatus == '2' ? '同意延期' : '不同意延期' }}
                    </Descriptions.Item>
                    <Descriptions.Item label="审批通过时间">
                      {{ item.approveStatus != '2' ? '--' : item.approveTime }}
                    </Descriptions.Item>
                    <Descriptions.Item label="填报人" :span="1.5">
                      {{ item.filledBy }}
                    </Descriptions.Item>
                    <Descriptions.Item label="填报时间" :span="1.5">
                      {{ item.filledTime }}
                    </Descriptions.Item>
                    <Descriptions.Item label="附件" :span="3">
                      <div :style="{ height: '80px', overflowY: 'auto', }">
                        <div v-if="item.woAttachmentList.length > 0">
                          <List size="small" item-layout="horizontal" :data-source="item.woAttachmentList">
                            <template #renderItem="{ item }">
                              <List.Item>
                                <a @click="downloadAttament(item.id)"><file-two-tone />{{ item.fileName }} </a>
                              </List.Item>
                            </template>
                          </List>
                        </div>
                      </div>
                    </Descriptions.Item>
                  </Descriptions>
                </Card>
              </a-col>
            </template>
          </a-row>
        </Tabs.TabPane>
        <Tabs.TabPane v-if="props.superviseShow" key="supervise" tab="督办历史">
          <Empty v-show="superviseData.length == 0"></Empty>
          <a-row :gutter="[16, 16]">
            <template v-for="(item, key) in superviseData" :key="key">
              <a-col span="24">
                <Card class="mt-3">
                  <Descriptions :column="3" :label-style="{ width: '120px' }" size="small" bordered>
                    <Descriptions.Item label="督办单号" :span="1.5">
                      {{ item.superviseNo }}
                    </Descriptions.Item>
                    <Descriptions.Item label="督办完成时间" :span="1.5">
                      {{ item.approveTime }}
                    </Descriptions.Item>
                    <Descriptions.Item label="督办内容" :span="3">
                      <div :style="{ height: '80px', overflowY: 'auto', }">
                        {{ item.superviseContent }}
                      </div>
                    </Descriptions.Item>
                    <Descriptions.Item label="督办意见" :span="3">
                      <div :style="{ height: '80px', overflowY: 'auto', }" v-html="item.replyOpinion">
                      </div>
                    </Descriptions.Item>
                    <Descriptions.Item label="督办人" :span="1.5">
                      {{ item.filledBy }}
                    </Descriptions.Item>
                    <Descriptions.Item label="督办时间" :span="1.5">
                      {{ item.filledTime }}
                    </Descriptions.Item>
                    <Descriptions.Item label="附件" :span="3">
                      <div :style="{ height: '80px', overflowY: 'auto', }">
                        <div v-if="item.woAttachmentList.length > 0">
                          <List size="small" item-layout="horizontal" :data-source="item.woAttachmentList">
                            <template #renderItem="{ item }">
                              <List.Item>
                                <a @click="downloadAttament(item.id)"><file-two-tone />{{ item.fileName }} </a>
                              </List.Item>
                            </template>
                          </List>
                        </div>
                      </div>
                    </Descriptions.Item>
                  </Descriptions>
                </Card>
              </a-col>
            </template>
          </a-row>
        </Tabs.TabPane>
      </Tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { FileTwoTone } from '@ant-design/icons-vue';
import { processHisColumns } from './columns';
import { getTaskListByProcessInstanceId, generateHighlightDiagram } from '@/api/workorder/task';
import { useTable } from '@/components/core/dynamic-table';
import { Descriptions, Tabs, Card, List, Empty, Radio } from 'ant-design-vue';
import { listReplyAll } from '@/api/workorder/reply';
import { listVisitAll } from '@/api/workorder/visit';
import { listExtensionAll } from '@/api/workorder/extension';
import { downloadAttament, listAttament } from '@/api/workorder/common/attachment';
import { reactive, onMounted, ref } from 'vue';
import { parseTime, selectDictLabel } from '@/utils/telchina';
import { listSuperviseAll } from '@/api/workorder/supervise';
import { getWorkOrderByWorkOrderNumber } from '@/api/workorder/order';
import { CountDown } from '@/components/basic/countdown';

defineOptions({
  name: 'processHistory',
});
const [DynamicTable] = useTable();

// 回复单数据
let replyData = reactive({
  replyDataSource: []
});
// 回访单数据
let visitData = reactive({
  visitDataSource: []
});
// 延期申请单数据
let extensionData = reactive([{}]);
// 督办任务单
let superviseData = reactive([{}]);
// 子单编号
let childnumber = reactive([])
// 流程图片
let svgData = ref([])
// 当前处理人
let candidateUserNames = ref('')
// 工单信息
let workOrder = reactive({info:{}});
// 回复剩余时间倒计时
let downCount = ref();
// 是否显示结案时间
let showCompleteTime =  ref(false);



const props = defineProps({
  instanceId: {
    type: String,
    required: false,
  },
  workOrderNumber: {
    type: String,
    required: false,
  },
  processHisShow: {
    type: Boolean,
    required: false,
    default: true
  },
  replyShow: {
    type: Boolean,
    required: false,
    default: true
  },
  returnVisitShow: {
    type: Boolean,
    required: false,
    default: true
  },
  extensionShow: {
    type: Boolean,
    required: false,
    default: true
  },
  superviseShow: {
    type: Boolean,
    required: false,
    default: true
  },
  orderInfoShow: {
    type: Boolean,
    required: false,
    default: false
  },
  dataObject: {
    type: Object,
    required: false,
    default: null
  }
});

// 审批流程数据+ 流程信息
async function openHandleModel() {
  if (props.instanceId == null) {
    return null
  } else {
    svgData.value = await generateHighlightDiagram(props.instanceId)
    const returnData = await getTaskListByProcessInstanceId({ 'processInstanceId': props.instanceId })
    candidateUserNames.value = returnData[0].candidateUserNames ? '[当前处理人：' + returnData[0].candidateUserNames + ']' : '';
    return returnData;
  }
}
async function replyChangeNoReply(e: Event) {
  let param = { "workOrderNumber": e.target.value };
  replyData.replyDataSource = await listReplyAll(param);
}
async function replyChangeNorReturnVisit(e: Event) {
  let param = { "workOrderNumber": e.target.value };
  visitData.visitDataSource = await listVisitAll(param);
}
onMounted(async () => {

  // 获取回复单、回访单、延期申请单数据、工单信息
  let param = { "workOrderNumber": props.workOrderNumber };
  replyData.replyDataSource = await listReplyAll(param);
  visitData.visitDataSource = await listVisitAll(param);
  extensionData = await listExtensionAll(param);
  superviseData = await listSuperviseAll(param);

})
getParentChild()

async function getParentChild() {
  workOrder.info = await getWorkOrderByWorkOrderNumber(props.workOrderNumber);
  workOrder.info.woAttachmentList = await listAttament({ 'bussId': workOrder.info.id });
  downCount.value = new Date(workOrder.info.expirationTime).getTime();
  showCompleteTime.value = workOrder.info.workOrderStatus == '5';
  
  if (workOrder.info.parentChild == '2') {
    let childWorkOrderNumber = workOrder.info.childWorkOrderNumbers.split(",");
    childnumber.push({ "value": props.workOrderNumber, "label": '主单：' + props.workOrderNumber, })
    childWorkOrderNumber.forEach(element => {
      childnumber.push({ "value": element, "label": '派单：' + element })
    });
  }
}

</script>
<style lang="less">
.ant-input-number {
  width: 100%;
}

.workOrderNumber {
  color: #1890ff;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ant-tooltip-inner {
  width: 500px;
}
</style>

